<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import layout from '../widget.layout.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'ButtonBar',
        remark: '按钮的父容器',
        extends: [layout],
        slots: [{
          name: 'default',
          remark: '按钮集合',
          option: 'w-button'
        }, {
          name: 'split',
          remark: '每两个按钮之间的间隔元素',
          option: ''
        }, ],
        examples: [{
          remark: '按钮栏',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-buttonbar gap="10" height="50" align="right">
                <w-button text="保存" face="primary"></w-button>
                <w-button text="刷新"></w-button>
              </w-buttonbar>
            </template>
            `
        },
        {
          remark: '普通按钮，有下拉的按钮，有下拉+点击的按钮，仅有图标的有下拉的按钮',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-buttonbar gap="10" height="50" align="right">
                <w-button text="保存"></w-button>
                <w-button text="新建">
                  <w-button text="新建子任务" @click="click"></w-button>
                  <w-button text="新建反馈" @click="click"></w-button>
                </w-button>
                <w-button text="打印" @click="click">
                  <w-button text="预览打印" @click="click"></w-button>
                  <w-button text="直接打印" @click="click"></w-button>
                </w-button>
                <w-button icon=".f-i .f-i-mail" :show-drop-icon="false" :hover-show-drop="true">
                  <w-button text="评论" @click="click"></w-button>
                  <w-button text="私信" @click="click"></w-button>
                </w-button>
              </w-buttonbar>
            </template>
            <${'script'}>
              export default {
                methods: {
                  click(e) {
                    alert('print')
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						methods: {
						  click(e) {
						    alert($(e).text)
						  }
						}
					}
        }, {
          remark: '侧边栏，带下级菜单',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-buttonbar class="navbar" :vertical="true">
                <w-button text="通知公告" :hover-show-drop="true" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                  <w-button text="通知公告维护"></w-button>
                </w-button>
                <w-button text="基础维护" :hover-show-drop="true" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                  <w-button text="证单拟制模板维护"></w-button>
                  <w-button text="标准证稿维护"></w-button>
                  <w-button text="证单打印模板维护"></w-button>
                </w-button>
                <w-button text="系统管理" :hover-show-drop="true" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                  <w-button text="审计与日志" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                    <w-button text="操作日志"></w-button>
                  </w-button>
                  <w-button text="业务参数设置" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                    <w-button text="文件服务设置"></w-button>
                  </w-button>
                  <w-button text="技术参数设置" :drop-props="{class: 'navmenu'}" drop-icon=".f-i .f-i-angle-right">
                    <w-button text="缓存管理"></w-button>
                    <w-button text="数据字典"></w-button>
                  </w-button>
                </w-button>
              </w-buttonbar>
            </template>
            <style>
              .navbar {
                width: 120px;
                background-color: #333;
              }
              .navbar .w-button,
              .navbar .w-button.z-drop {
                background-color: transparent;
                color: #fff;
                border: 0;
                height: 50px;
              }
              .navmenu {
                background-color: #333;
                border: 0;
                margin-left: 10px;
              }
              .navmenu .w-menubutton {
                background-color: transparent;
                color: #fff;
                height: 50px;
              }
            </style>
          `,
					comp: {
						data() {
						  return {
						    offset: 0
						  }
						},
						methods: {
						  change(e, value) {
						    this.offset = value
						  }
						}
					}
        }]
      }
    },
    created() {
      this.merge([{
          name: 'valign',
          default: 'middle'
        },
        {
          name: 'vertical',
          type: 'Boolean',
          remark: '是否垂直排列',
          default: ''
        },
      ], 'attrs')
    }
  }
</script>

<style>
  .navbar {
    width: 120px;
    background-color: #333;
  }
  .navbar .w-button,
  .navbar .w-button.z-drop {
    background-color: transparent;
    color: #fff;
    border: 0;
    height: 50px;
  }
  .navmenu {
    background-color: #333;
    border: 0;
    margin-left: 10px;
  }
  .navmenu .w-menubutton {
    background-color: transparent;
    color: #fff;
    height: 50px;
  }

</style>
